<template>
  <view>
    <view
      v-for="(t,i) in dataList"
      :key="i"
      class="list"
    >
      <!-- <slot :lst="t" /> -->
      <template
        v-for="(item, index1) in t"
      >
        <view
          v-if="item.isCustomize"
          :key="index1"
          class="customize"
          @click="clickItem(item)"
        >
          <img
            class="img"
            mode="aspectFill"
            src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/route/customize.png"
            referrerpolicy="no-referrer"
          >
        </view>
        <view
          v-if="!item.isCustomize && t.length"
          :key="item.id"
          class="listItem"
          @click="clickItem(item)"
        >
          <image
            class="img"
            :src="item.logoImage"
            mode="aspectFill"
          />
          <view class="itemInfo">
            <view class="itemTitle font-13 title-line-clamp">
              {{ item.name }}
            </view>
            <view
              v-if="item.tagList"
              class="tabList"
            >
              <view class="item">
                精选推荐
              </view>
              <view
                v-for="(tt,ttindex) in item.tagList"
                :key="ttindex"
                class="item"
              >
                {{ tt.name }}
              </view>
            </view>
            <view class="flex">
              <view
                v-if="item.price"
                class="start-price"
              >
                {{ item.price }}
              </view>
              <view class="font-11 color-999">
                销量：{{ item.sellNumber }}
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => {
					return [];
				}
			},
			path: {
				type: String,
        default: ''
			}
		},
		data() {
			return {
				dataList: {
					dataList1: [],
					dataList2: []
				},
				index: 0,
				state:true,//定义是否能加载dom
			};
		},
		watch: {
			list(val) {
				if (val.length === 0) {
					this.index = 0;
					this.dataList.dataList1 = [];
					this.dataList.dataList2 = [];
				}
				if (val.length) {
					console.log(val)
					this.mountMenu();
				}
			}
		},
		methods: {
			mountMenu(arg) {
				var index = arg || this.index;
				// 支付宝小程序不支持in这个方法，参考文档 https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryin
				console.log(index,this.list.length)
				console.log(this.list)
				if(this.state || index===0){
					this.makeDom()
					this.state=false
				}
			},
			makeDom(){
				let index=this.index
				const query = uni.createSelectorQuery().in(this);
				if (this.list.length > index){
					query.selectAll('.list').boundingClientRect((rect) => {
						let height1 = rect[0] && rect[0].height;
						let height2 = rect[1] && rect[1].height;
						if(height1 !== undefined && height2 !== undefined && !(index !== 0 && (height1 === 0 && height2 === 0))) {
							let listFlag = rect[0].bottom - rect[1].bottom <= 0 ? 'dataList1' : 'dataList2';
							if(this.list[index]) this.dataList[listFlag].push(this.list[index]);
							this.$nextTick(() => {
							  this.index+=1;
								this.makeDom();
							});
						}
					}).exec();
				}else{
					this.state=true
					let timer=setTimeout(()=>{
						uni.hideLoading()
					},100)
				}
			},
			clickItem(item) {
        console.log('点击了瀑布流item', item);
        if(item.isCustomize) {
					this.$jumpUrl('/subPages/customize/index');
        } else if(item.type && item.goodsId) {
        console.log('点击了瀑布流item2');
					const obj = {
						ROUTE: '/productPages/route/detail', //线路
						BUILD: '/productPages/team/productDetail'	// 团建
					};
					this.$jumpUrl(`${obj[item.type]}?id=${item.goodsId}`);
				} else if(this.path) {
					this.$jumpUrl(`${this.path}?id=${item.id}`);
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.list {
		width: 335upx;
		float: left;

		&:nth-child(2n) {
			margin-left: 20upx;
		}
		
		.customize {
			width: 335rpx;
			height: 255rpx;
			border-radius: 10upx;
			margin-bottom: 20upx;
			position: relative;
			background-color: #9dd4e1;
			
			.img {
				width: inherit;
				height: inherit;
				border-radius: 10upx;
			}
			.info {
				position: absolute;
				text-align: center;
				top: 30rpx;
				width: inherit;
				color: #FFFFFF;
				
				.info1 {
					font-size: 44rpx;
					font-family: YouSheBiaoTiHei;
					line-height: 57rpx;
					margin-bottom: 10rpx;
				}
				.info2 {
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					line-height: 33rpx;
					margin-bottom: 20rpx;
				}
				.info3 {
					text-align: center;
					position: relative;
					.btn {
						width: 296rpx;
						height: 60rpx;
						background: #FFFFFF;
						color: #555555;
						border-radius: 10rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						left: 50%;
						transform: translate(-50%);
					}
				}
			}
		}

		.listItem {
			// padding: 20upx;
			box-sizing: border-box;
			background: #FFF;
			border-radius: 10upx;
			margin-bottom: 20upx;

			.img {
				width: 335upx;
				height: 260upx;
				border-radius: 10upx 10upx 0 0;
				overflow: hidden;
			}
			
			.itemInfo {
				padding: 0 20rpx 20rpx;
			}

			.itemTitle {
				margin: 10rpx 0;
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 37rpx;
			}

			.tabList {
				overflow: hidden;
				margin-bottom: 14upx;

				.item {
					display: inline-block;
					margin: 0 10upx 10upx 0;
					padding: 6upx 14upx;
					background: #FEF2E7;
					border-radius: 4upx;
					font-size: 20upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FE7D15;
				}
			}

			.flex {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
			}
		}
	}
</style>
